<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cool loading</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      let container = document.querySelector(".container");

      for (let j = 0; j < 4; j++) {
        let loader = document.createElement("div");
        loader.classList.add("loader");
        loader.style.setProperty("--j", j);
        for (let i = 0; i <= 20; i++) {
          let span = document.createElement("span");
          span.style.setProperty("--i", i);
          loader.appendChild(span);
        }
        container.appendChild(loader);
      }
    });
  </script>
</html>
